<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style='width:600px;height:400px'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <script>
    var mycharts = echarts.init(document.querySelector('div'))
    $.get('./json/china.json', function (res) {
      // res就是中国的矢量地图
      console.log(res);
      //注册地图
      echarts.registerMap('chinaMap', res)
      //注册完才能执行
      var option = {
        geo: {
          type: 'map',
          //之前注册过,等上面注册完才可以
          map: 'chinaMap',
          roam: true,
          label: {
            show: true
          },
          zoom: 2,
          center: [87.6, 43.79]
        }
      }
      mycharts.setOption(option)
    })
  </script>
</body>
<!-- https://www.bilibili.com/video/BV1bh41197p8?p=22 -->

</html>